<template>
<div id="app">
    <el-header>
        <Header @func="getMsgFormSon" />
    </el-header>
    <el-container>
        <el-aside width="200px" v-show="show_aside">
            <Aside @func="getMsgFromAside" />
        </el-aside>
        <el-main><Map :sendMsgToSon="show_gridLayer" /></el-main>
    </el-container>
</div>
</template>

<script>
import Header from "./components/Header.vue"
import Aside from "./components/Aside.vue"
import Map from "./components/Map.vue"

export default {
    data() {
        return {
            show_aside: false,
            show_gridLayer: false
        }
    },
    methods: {
        getMsgFormSon(msg) {
            this.show_aside = msg
        },
        getMsgFromAside(msg) {
            this.show_gridLayer = msg
        }
    },
    components: {
        Header,
        Aside,
        Map,
    }
}
</script>

<style>
html,
body,
#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    height: 100%;
}

.el-container {
    width: 100%;
    height: 100%;
}

html,
body,
#app,
.el-container,
.el-header,
.el-main {
    margin: 0 !important;
    padding: 0 !important;
}

.el-header {
    height: 40px !important;
    background-color: #409EFF;
    color: #fff;
}

.el-aside,
.el-collapse,
.el-collapse-item,
.el-collapse-item__header {
    background-color: #e9eef3 !important;
}
</style>
